<!--开发商返还款列表-->
<template>
  <div class="developerPayment">
    <el-form :inline="true" :model="tableConfig" ref="tableConfig">
      <el-form-item label="项目：">
        <el-input clearable v-model="tableConfig.projectName" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item label="收款方：">
        <el-input clearable v-model="tableConfig.receiveName" placeholder="请输入收款方名称"></el-input>
      </el-form-item>
      <el-form-item label="付款用途">
        <el-select clearable v-model="tableConfig.payUse" placeholder="请选择">
          <el-option label="返还开发商" value="1"></el-option>
          <el-option label="返还个人（员工）" value="2"></el-option>
          <el-option label="通过第三方返还个人" value="3"></el-option>
          <el-option label="购买购物卡（非经纪人奖励）" value="4"></el-option>
          <el-option label="推广营销" value="5"></el-option>
          <el-option label="其他" value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款状态：">
        <el-select clearable v-model="tableConfig.payStatus" placeholder="请选择">
          <el-option label="未付款" value="0"></el-option>
          <el-option label="已付款" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提交H3状态：">
        <el-select v-model="tableConfig.h3SubmitStatus" placeholder="请选择">
          <el-option label="全部" :value="undefined"></el-option>
          <el-option label="待提交" :value="1"></el-option>
          <el-option label="提交成功" :value="2"></el-option>
          <el-option label="驳回待提交" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="H3审批状态：">
        <el-select v-model="tableConfig.h3ExamineStatus" placeholder="请选择">
          <el-option label="全部" :value="undefined"></el-option>
          <!-- <el-option label="未审核" :value="1"></el-option> -->
          <el-option label="审核中" :value="2"></el-option>
          <el-option label="审核完成" :value="3"></el-option>
          <el-option label="审核拒绝" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提交时间：">
        <el-date-picker
          v-model="time"
          clearable
          value-format="timestamp"
          format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          :default-time="['00:00:00', '23:59:59']"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
        <el-button @click="onClear">重置</el-button>
        <el-button type="primary" @click="add">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table @sort-change="sortChange" :data="listData" border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" prop="code" label="单号"></el-table-column>
      <el-table-column align="center" prop="projectName" label="项目"></el-table-column>
      <el-table-column align="center" prop="devName" label="楼盘"></el-table-column>
      <el-table-column align="center" prop="payAmount" label="付款含税金额（元）"></el-table-column>
      <el-table-column align="center" prop="payTax" label="税金（元）"></el-table-column>
      <el-table-column align="center" prop="payAmountNoTax" label="付款不含税金额（元）"></el-table-column>
      <el-table-column align="center" :formatter="payUse" label="付款用途"></el-table-column>
      <el-table-column align="center" prop="receiveName" label="收款方"></el-table-column>
      <el-table-column align="center" label="付款状态">
        <template slot-scope="scope">
          <span v-if="scope.row.payStatus === 0">未付款</span>
          <span v-else>已付款</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="h3SubmitStatus" :formatter="h3Submit" label="提交H3状态"></el-table-column>
      <el-table-column align="center" prop="h3ExamineStatus" :formatter="h3Examine" label="H3审批状态"></el-table-column>
      <el-table-column align="center" prop="creatorName" label="提交人"></el-table-column>
      <el-table-column
        :formatter="createTimes"
        align="center"
        porp="createTime"
        width="150"
        sortable="custom"
        label="提交时间"
      ></el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.isInitial === 1">
            <el-button type="text" @click="details(scope.row.id)">查看</el-button>
            <el-button
              type="text"
              :disabled="flowChart(scope.row.h3SubmitStatus,scope.row.h3ExamineStatus)"
              @click="withdraw(scope.row.id)"
            >查看流程</el-button>
            <el-button
              type="text"
              v-if="ResubmitTexts"
              :disabled="Resubmission(scope.row.h3SubmitStatus,scope.row.h3ExamineStatus)"
              @click="resubmit(scope.row.id)"
            >编辑</el-button>
          </span>
          <span v-else>——</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="paging">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="tableConfig.pageNum"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="tableConfig.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
export default {
  name: "developerPayment",
  title: "返还款支付",
  data() {
    return {
      listData: [],
      total: 0,
      tableConfig: {
        projectName: "",
        receiveName: "",
        h3SubmitStatus: "",
        h3ExamineStatus: "",
        code: "",
        startCreateTime: "",
        endCreateTime: "",
        payStatus: "",
        payUse: "",
        pageSize: 10,
        pageNum: 1,
        sort: 2,
        auditStatus: ""
      },
      time: []
    };
  },
  activated() {
    if (this.$route.params.code) {
      this.tableConfig.code = this.$route.params.code;
    }
    this.list();
  },
  created() {
    this.list();
  },
  methods: {
    // 时间升降
    sortChange(column) {
      if (column.order == "ascending") {
        this.tableConfig.sort = 1;
      } else {
        this.tableConfig.sort = 2;
      }
      this.list();
    },
    h3Examine(row) {
      if (row.isInitial === 2) {
        return "——";
      }
      if (row.h3ExamineStatus === 2) {
        return "审核中";
      } else if (row.h3ExamineStatus === 3) {
        return "审核完成";
      } else if (row.h3ExamineStatus === 4) {
        return "审核拒绝";
      } else {
        return "";
      }
    },
    h3Submit(row) {
      if (row.isInitial === 2) {
        return "——";
      }
      if (row.h3SubmitStatus === 1) {
        return "待提交";
      } else if (row.h3SubmitStatus === 2) {
        return "提交成功";
      } else {
        return "驳回待提交";
      }
    },
    // 查看流程按钮权限
    flowChart(h3SubmitStatus, h3ExamineStatus) {
      if (h3SubmitStatus === 1 && h3ExamineStatus === null) {
        return true;
      } else {
        return false;
      }
    },
    formatterTime(row) {
      return utils.getTimeString(row.auditTime);
    },
    // 编辑按钮显示/隐藏
    ResubmitTexts() {
      let role = JSON.parse(window.sessionStorage.getItem("cmsUser")).roleName;
      if (role == "运营人员") {
        return true;
      } else {
        return false;
      }
    },
    // 编辑按钮是否禁用
    Resubmission(bpmSubmitStatus, bpmAuditStatus) {
      if (
        (bpmSubmitStatus === 1 && bpmAuditStatus === null) ||
        (bpmSubmitStatus === 3 && bpmAuditStatus === 4)
      ) {
        return false;
      } else {
        return true;
      }
    },
    createTimes(row) {
      return utils.getTimeString(row.createTime);
    },
    payUse(row) {
      if (row.payUse === 1) {
        return "返还开发商";
      } else if (row.payUse === 2) {
        return "返还个人（员工）";
      } else if (row.payUse === 3) {
        return "通过第三方返还个人";
      } else if (row.payUse === 4) {
        return "购买购物卡（非经纪人奖励）";
      } else if (row.payUse === 5) {
        return "推广营销";
      } else {
        return "其他";
      }
    },
    // 编辑
    resubmit(id) {
      this.$router.push({ path: "./editPayment", query: { id: id } });
    },
    // 查看
    details(id) {
      this.$router.push({ path: "./developerPaymentSee", query: { id: id } });
    },
    // 查看流程
    withdraw(id) {
      this.$router.push({
        path: "./h3ViewProcess",
        query: { id: id }
      });
    },
    add() {
      this.$router.push({ path: "./addPayment" });
    },
    handleSizeChange(size) {
      this.tableConfig.pageSize = size;
      this.list();
    },
    handleCurrentChange(page) {
      this.tableConfig.pageNum = page;
      this.list();
    },
    list() {
      this.$axios
        .post("/commission/developer/getList", this.tableConfig)
        .then(res => {
          for (let item of res.data) {
            item.payAmount = utils.formatMoney(item.payAmount);
            item.payTax = utils.formatMoney(item.payTax);
            item.payAmountNoTax = utils.formatMoney(item.payAmountNoTax);
            for (let [key, value] of Object.entries(item)) {
              if (item.isInitial === 2) {
                if (value === null || value === 0) {
                  item[key] = "——";
                }
              }
            }
          }
          this.listData = res.data;
          this.total = res.total;
        });
    },
    searchList() {
      this.tableConfig.pageNum = 1;
      let [startTime, endTime] = this.time || ["",""];
      this.tableConfig.startCreateTime = startTime;
      this.tableConfig.endCreateTime = endTime;
      this.list();
    },
    onClear() {
      this.tableConfig = {
        projectName: "",
        devName: "",
        receiveName: "",
        h3SubmitStatus: "",
        h3ExamineStatus: "",
        code: "",
        startCreateTime: "",
        endCreateTime: "",
        payStatus: "",
        payUse: "",
        pageSize: 10,
        pageNum: 1,
        sort: 2
      };
      this.time = [];
      this.list();
    }
  }
};
</script>
<style lang="stylus">
.developerPayment {
  .paging {
    margin-top: 15px;
    text-align: right;
  }

  .el-button {
    margin-left: 0px;
  }
}
</style>


